<template>
  <el-main>
    <div class="t4_banner_bg">
      <div class="t4_search t4_w">
        <div class="t4_title_box">
          <div class="t4_title_l" @click="$router.push('/dataDirectory')">
            <img class="t4_title_img" src="@/assets/images/nav-1-e3e9173094a20d033bb38e30b173ee16.png" alt="" />
            <span class="t4_span1">看数据</span>
            <span class="t4_span2">海量数据，预览、下载、图表分析等多种在线查看方式</span>
          </div>
          <div class="t4_title_l" @click="$router.push('/serviceDirectory')">
            <img class="t4_title_img" src="@/assets/images/nav-2-91058ac71e4504beaceb6a9ae84a6534.png" alt="" />
            <span class="t4_span1">找服务</span>
            <span class="t4_span2">高速搜索引擎，提供分类筛选、高级查找等多种查询方式</span>
          </div>
        </div>
        <div class="searchInput">
          <el-input v-model="searchInfo" type="text" name="keywords" id="keywords" placeholder="请输入资源名称" clearable
            @keyup.enter.native="searchHandle">
            <el-button @click="searchHandle" slot="append" icon="el-icon-search">搜索</el-button>
          </el-input>
          <!-- <ul class="list_Ul">
            <li v-for="(item, index) in hotWordList" :key="index" :title="item.name">
              <a @click="hotClick(item)">{{ item.name }}</a>
            </li>
          </ul> -->
        </div>
      </div>
      <div class="t4_search_no">
        <ul>
          <li>
            <a>
              <p class="t4_no01">编目总数量</p>
              <p class="t4_no02">
                <span>{{ apiNum }}</span>个
              </p>
            </a>
          </li>
          <li>
            <a>
              <p class="t4_no01">文件下载量</p>
              <p class="t4_no02">
                <span>{{ onlineApiNum }}</span>个
              </p>
            </a>
          </li>
          <li>
            <a>
              <p class="t4_no01">用户预览量</p>
              <p class="t4_no02">
                <span>{{ sqlApiSum }}</span>个
              </p>
            </a>
          </li>
          <li>
            <a>
              <p class="t4_no01">用户使用量</p>
              <p class="t4_no02">
                <span>{{ tableApiSum }}</span>个
              </p>
            </a>
          </li>
          <li>
            <a>
              <p class="t4_no01">申请流程中</p>
              <p class="t4_no02">
                <span>{{ thirdApiSum }}</span>个
              </p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!--  -->
<!--    <div class="new-data-content">-->
<!--      <div class="w">-->
<!--        <div class="left-info">-->
<!--          <div class="slide-bar position1"></div>-->
<!--          <ul>-->
<!--            <li data-target="recommend-data" class="active" v-for="(item, index) in arrList" :key="index"-->
<!--              @click="changeData(index)">-->
<!--              <img class="icon icon3" :src="item.img"></img>-->
<!--              <div class="data-type">-->
<!--                <div class="data-name">{{ item.name }}</div>-->
<!--                <div class="data-en" style="font-size: 15px">{{ item.yw }}</div>-->
<!--              </div>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--        <div class="right-info">-->
<!--          <div class="data-info active" v-if="selectedIndex == 0">-->
<!--            <div class="data-list">-->
<!--              <div class="list-content active">-->
<!--                <div class="d-list d-list3">-->
<!--                  <ul>-->
<!--                    <li v-for="(item, index) in newData" :key="index">-->
<!--                      <div class="time">[{{ item.createTime }}]</div>-->
<!--                      <div class="cate-name">{{ item.name }}</div>-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="data-info active" v-if="selectedIndex == 1">-->
<!--            <div class="data-list">-->
<!--              <div class="list-content active">-->
<!--                <div class="d-list d-list3">-->
<!--                  <ul>-->
<!--                    <li v-for="(item, index) in interfaceSumArr" :key="index">-->
<!--                      <div class="time">[{{ item.creatTime }}]</div>-->
<!--                      <div class="cate-name">{{ item.bmName ? item.bmName : '暂无' }}</div>-->
<!--                      <div class="cate-num">调用次数{{ item.successNum }}</div>-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="data-info active" v-if="selectedIndex == 2">-->
<!--            <div class="data-list">-->
<!--              <div class="list-content active">-->
<!--                <div class="h-d-list">-->
<!--                  <ul>-->
<!--                    <li :class="'r' + (index + 1)" v-for="(item, index) in lastAccessArr" :key="index">-->
<!--                      <div :class="'rank r' + (index + 1)">{{ index + 1 }}</div>-->
<!--                      <div class="cate-name">{{ item.name }}</div>-->
<!--                      <div class="download-num">-->
<!--                        <span>调用次数{{ item.sqcs }}</span>-->
<!--                      </div>-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="list_box">
      <div class="t4_w">
        <div class="donlist">
          <div class="don-box">
            <div class="lists-box">
              <div class="title-box">
                <img src="@/assets/images/TOP10.png"  alt="" />
                <span class="titleSpan" >
                最新数据TOP10
              </span>
                <span class="t4_r t4_more">
                <i></i> <i></i> <i></i>
              </span>
              </div>
              <ul>
                <li v-for="(item, index) in newData" :key="index"  @click="chooseHandle(item)">
                  <a>
                  <span
                    class="name"
                    :title="item.name"
                    style="
                      width: 180px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  >
                    <i :class="['num', index < 4 ? 'bg-' + index : '']">{{
                        index + 1
                      }}</i>
                    {{ item.name }}
                  </span>
                    <span
                    >{{ item.createTime }}</span
                    >
                  </a>
                </li>
              </ul>
            </div>
            <div class="lists-box">
              <div class="title-box">
                <img
                  src="@/assets/images/icon_data-interface.png"
                  alt=""
                />
                <span class="titleSpan"
                >热门数据TOP10</span
                >
                <span class="t4_r t4_more">
                <i></i> <i></i> <i></i>
              </span>
              </div>
              <ul>
                <li v-for="(item, index) in lastAccessArr" :key="index" @click="chooseHandle(item)">
                  <a
                  ><span
                    class="name"
                    :title="item.name"
                    style="
                      width: 180px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  ><i :class="['num', index < 4 ? 'bg-' + index : '']">{{
                      index + 1
                    }}</i
                  >{{ item.name }}</span
                  ><span
                  >{{ item.sqcs }}次</span
                  >
                  </a>
                </li>
              </ul>
            </div>
            <div class="lists-box">
              <div class="title-box">
                <img
                  src="@/assets/images/icon_new-data.png"
                  alt=""
                />
                <span class="titleSpan"
                >最热领域TOP10</span
                >
                <span class="t4_r t4_more">
                <i></i> <i></i> <i></i>
              </span>
              </div>
              <ul>
                <li v-for="(item, index) in lastUpdateArr" :key="index" @click="chooseHandle(item)">
                  <a>
                  <span
                    class="name"
                    :title="item.areaName"
                    style="
                      width: 180px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  >
                    <i :class="['num', index < 4 ? 'bg-' + index : '']">{{
                        index + 1
                      }}</i>
                    {{ item.areaName }}</span
                  ><span>{{ item.count }}次</span></a
                  >
                </li>
              </ul>
            </div>
            <div class="lists-box">
              <div class="title-box">
                <img
                  src="@/assets/images/newDownload.png"
                  alt=""
                />
                <span class="titleSpan"
                >最新下载TOP10</span
                >
                <span class="t4_r t4_more">
                <i></i> <i></i> <i></i>
              </span>
              </div>
              <ul>
                <li v-for="(item, index) in interfaceSumArr" :key="index" @click="chooseHandle(item)">
                  <a
                  ><span
                    class="name"
                    :title="item.bmName"
                    style="
                      width: 180px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  >
                    <i :class="['num', index < 4 ? 'bg-' + index : '']">{{
                        index + 1
                      }}</i>
                    {{ item.bmName }}</span
                  ><span>{{ item.downloadTime }}</span></a
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="don-box-right">
            <div class="title-box">
                <img
                  src="@/assets/images/gzbg_icon.png"
                  alt=""
                />
                <span class="titleSpan"
                >政策举措 实施效果</span
                >
              </div>
            <div class="imgBox" @click="gozmss">
              <img
                src="@/assets/images/zhuantiimg.png"
                alt=""
              />
            </div>
            <div class="title-box">
              <img
                src="@/assets/images/icon_digitalSZ-P.png"
                alt=""
              />
              <span class="titleSpan"
              >新闻资讯</span
              >
              <span class="t4_r t4_more">
                <i></i> <i></i> <i></i>
              </span>
            </div>
            <ul>
              <img src="@/assets/images/gov-p-digitalSZ-new.jpg" style="width: 100%;padding-bottom: 5px" alt="">
              <li v-for="(item, index) in zxList" :key="index"  @click="gozxDetail(item)">
                <a>
                  <span
                    class="name"
                    :title="item.title"
                    style="
                      width: 150px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      cursor: pointer;
                    "
                  >
                    <i :class="['num', index < 4 ? 'bg-' + index : '']">{{
                        index + 1
                      }}</i>
                    {{ item.title }}</span
                  ><span>访问次数{{ item.viewCount }}</span></a
                >
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>

    <!--    数据分类 start   -->
    <div class="t4_ztcj_bg">
      <div class="t4_sjfl">
        <div class="t4_w t4_sjfl_cons">
          <div class="t4_l" style="position: absolute; margin-left: 18px">
            <div class="t4_sjfl_tit t4_18">
              <img src="@/assets/images/sjfl_icon.png" alt="" />数据分类
            </div>
            <ul class="t4_ly_fl">
              <li v-for="(item, index) in sjflTabs" :key="index" class="t4_ly_flli"
                :class="{ current: index === sjflTabsInd }" @click="dataClassHoverIn(item, index)">
                {{ item.dictvalue }}
              </li>
            </ul>
          </div>
          <div class="t4_r" style="position: relative; margin-right: 18px; margin-bottom: 60px">
            <div class="t4_subsjfl" style="display: block">
              <!--            领域-->
              <ul class="t4_ly_lists">
                <li :class="'t4_li' + (index + 1)" v-for="(item, index) in ztArrs" :key="index" >
                  <div class="t4_block">
                     <i></i>
                    <p :title="item.name" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.name }}</p>
                  </div>
                  <a @click="infoHandle(item)">
                    <div class="t4_none">
                      <p>查看详情</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>


        </div>
      </div>
    </div>

    <!--    数据分类 end     -->
  </el-main>
</template>

<script>
import {
  topFive,
  getThemes,
  getOverviewInfo,
  getCatalogData,
  getApiTrendList,
  shareApi,
  shareDept,
  searchConditionGet,
  getIndex,
  searchConditionGetAd,
  sjlNum,
  getSuccesstop,
  getAllfiles,
  getQueryapiranking,
  getbmlist, dataSjbmZrsj,
  wjxzNum,
  yhylNum, yhsyNum, yhsqNum, getZxDelete, getZxList,getHottestarea,getNewdownload
} from "../../utils/httpUtils";
import Cookies from "js-cookie";
export default {
  name: "index",
  data() {
    return {
      zxList:[],
      tokens: JSON.parse(Cookies.get("token")),
      newData: [],
      apiNum: "",
      developingApiNum: "",
      inUserApiNum: "",
      offlineApiNum: "",
      onlineApiNum: "",
      sqlApiSum: "",
      tableApiSum: "",
      thirdApiSum: "",

      sjflTabsInd: 0,
      sjflTabs: [],
      trees: [],
      znewList: [
        {
          name: "结婚登记信息查询接口_241",
          time: "2024-05-22 18:42:11",
          type: "国家发展改革委",
        },
        {
          name: "人社局-(机关事业单位养老保险)缴费月明细接口",
          time: "2024-03-04 09:45:42",
          type: "省人社厅",
        },
        {
          name: "饮用水卫生安全产品卫生许可批件",
          time: "2024-03-26 16:40:13",
          type: "省卫健委",
        },
        {
          name: "停车场余位信息",
          time: "2024-02-06 13:10:36",
          type: "其他",
        },
        {
          name: "企业异常名录",
          time: "2024-02-23 10:20:48",
          type: "其他",
        },
        {
          name: "市不动产产权信息查询接口",
          time: "2024-04-10 16:25:48",
          type: "行政审批局",
        },
        {
          name: "沧县不动产产权信息查询接口",
          time: "2024-04-10 16:25:48",
          type: "行政审批局",
        },
      ],
      remenList: [
        {
          name: "市不动产产权信息查询接口",
          time: "2024-04-10 16:25:48",
          type: "行政审批局",
        },
        {
          name: "沧县不动产产权信息查询接口",
          time: "2024-04-10 16:25:48",
          type: "行政审批局",
        },
        {
          name: "死亡人口查询接口",
          time: "2024-04-18 16:35:53",
          type: "省民政厅",
        },
        {
          name: "人社局-(工伤保险)缴费信息查询接口",
          time: "2024-03-04 09:45:42",
          type: "省人社厅",
        },
      ],
      selectedIndex: 0,
      activeIndex: "1",
      treeList: [],
      // 热门关键词
      hotWordList: [],
      // 搜索内容
      searchInfo: "",
      // // 数据资源总数
      // dataCount: "",
      // institution: "",
      // serverCount: "",
      // exchangeNum: "",
      // 数据资源总数
      dataNum: 0,
      // 服务资源总数
      serveNum: 0,
      // 共享机构
      institution: 0,
      // 交换数据
      exchangeNum: 0,
      // 数据分类
      dataClass: [],
      ztArrs: [],
      // 最新资源
      lastUpdateArr: [],
      // 今日服务资源申请 TOP10
      sevenDayArr: [],
      // 最热资源
      lastAccessArr: [
      ],
      // 今日数据资源申请TOP10
      interfaceSumArr: [],
      policyArr: [],
      apiTrendList: [],
      arrList: [

        {
          name: "最新数据",
          yw: "RECOMMEND",
          img: require("@/assets/images/dataicon1-0754e51a50d211d00b5cc432d1a3f278.png"),
        },
        {
          name: "推荐数据",
          yw: "RECOMMEND",
          img: require("@/assets/images/dataicon3-327efffcb12be51069cc04f7328fba6c.png"),
        },
        {
          name: "热门数据",
          yw: "RECOMMEND",
          img: require("@/assets/images/dataicon2-6f46be1c01ca1236df2ebc9a83baf77a.png"),
        },
      ],
    };
  },
  mounted() {
    this.getTree();
    this.init();
    this.gettype();
    this.zxListFn()
    setTimeout(() => {
      console.log(this.sjflTabs, "this.sjflTabs");
      this.dataClassHoverIn(this.sjflTabs[0], this.sjflTabsInd);
    },300)
    this.getHottestareaFn()
    this.getNewdownloadFn()
  },
  methods: {
    getNewdownloadFn() {
      getNewdownload().then(res=>{
        console.log(res,'最新下载top10-------=====')
        this.interfaceSumArr = res
      })
    },
    getHottestareaFn(){
      getHottestarea().then(res=>{
        console.log(res,'最热领域前十')
        this.lastUpdateArr = res;
      })
    },
    chooseHandle(val) {
      console.log(val);
      this.$router.push({
        path: "/seekResult",
        query: {
          searchVal: val.name ? val.name : val.bmName,
          type:1
        },
      });
    },
    gozxDetail(item){
      console.log(item,'资讯详情')
      const id = item.id; // 要传递的 ID 参数
      const url = this.$router.resolve({
        name: 'newsInformationDetails',
        query: {id: id}
      }).href;
      window.open(url, '_blank'); // 在新窗口中打开路由
    },
    zxListFn(){
     let query = {
          current: 1,
          size: 17,
      }
      getZxList(query).then((res) => {
        console.log(res, "资讯列表");
        this.zxList = res.content
      });
    },
    gozmss(){
      this.$confirm('您访问的链接即将离开“沧州市数据共享交换平台”门户网站，是否继续？', '温馨提示', {
        type: 'warning'
      })
        .then(() => {
        window.open("https://www.gov.cn/zhengce/zczhjd/")
        })
        .catch(() => {});
    },
    gettype() {
      this.$axios({
        url: xhDomain + `/api/meunDept/getType?id=1`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          "Authorization": this.tokens
        },
      }).then((res) => {
        // this.nrOptions = res.data
        this.sjflTabs = res.data
        console.log(this.sjflTabs, "this.sjflTabs");
      })
    },
    changeData(index) {
      console.log(index, "index")
      this.selectedIndex = index;
      if (index === 0) {
        document.querySelector(".slide-bar").className = "slide-bar position1";
      } else if (index === 1) {
        document.querySelector(".slide-bar").className = "slide-bar position2";
      } else if (index === 2) {
        document.querySelector(".slide-bar").className = "slide-bar position3";
      }
    },
    getIndexData() {
      sjlNum().then((res) => {
        console.log(res, "数据量");
        this.apiNum = res ? this.numberTransform(res) : 0;
      });
      wjxzNum().then(res => {
        console.log(res, "文件下载量")
        this.onlineApiNum = res ? this.numberTransform(res) : 0;
      })
      yhylNum().then(res => {
        console.log(res, "用户预览量")
        this.sqlApiSum = res ? this.numberTransform(res) : 0
      })
      yhsyNum().then(res => {
        console.log(res, "用户使用量")
        this.tableApiSum = res ? this.numberTransform(res) : 0
      })
      yhsqNum().then(res => {
        console.log(res, "用户申请量")
        this.thirdApiSum = res ? this.numberTransform(res) : 0
      })

      // 推荐数据TOP10
      // getSuccesstop().then((res) => {
      //   console.log(res, "推荐数据123");
      //   this.interfaceSumArr = res;
      // });
      // 最新数据TOP10
      getAllfiles().then((res) => {
        console.log(res, "最新数据123");
        this.newData = res;
      });
      // 热门数据top10
      dataSjbmZrsj().then((res) => {
        console.log(res, "热门数据123");
        this.lastAccessArr = res;
      });
    },

    // 点击数据分类
    classification(val) {
      console.log(val, "val");
      this.$router.push({ path: "/serviceDirectory", query: { classification: val } });
      // this.$router.push({ path: "seekResult", query: { code: val.code } });
    },
    // 数据目录 树结构
    getTree() {
      let _this = this;
      getCatalogData().then((res) => {
        console.log(res, "树1");
        _this.dataClass = res.cMeunDepts;
        _this.trees = res.cMeunDepts;
        console.log(_this.trees);
      });
    },
    // 今日服务资源申请 TOP10

    infoHandle(val) {
      console.log(val, "val");
      this.$router.push({ path: "seekResult", query: { themeVal: val } });
    },
    init() {
      this.getIndexData();
    },
    // getHotWord() {
    //   // 热门关键词
    //   topFive().then(res => {
    //     console.log(res, '热门关键词============================')
    //     this.hotWordList = res
    //   })
    //
    // },
    // hotClick(val) {
    //   console.log(val);
    //   this.searchInfo = val;
    //   this.$router.push({
    //     path: "/seekResult",
    //     query: { searchVal: val },
    //   });
    // },
    searchHandle() {
      // this.$bus.$emit('seekInfo',this.searchInfo);
      this.$router.push({
        path: "/seekResult",
        query: { searchVal: this.searchInfo },
      });
    },
    // 数据分类鼠标进入事件
    dataClassHoverIn(item, index) {
      // console.log(item, "item");
      // console.log(index, "index");
      this.sjflTabsInd = index;
      this.$axios({
        url: xhDomain + `/api/meunDept/sonList?type=${item.label}`,
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          "Authorization": this.tokens
        },
        // data: params
      }).then((res) => {
          console.log(res, "res444444");
          this.ztArrs = res.data
      })
    },
    numberTransform(val) {
      let param = {};
      let k = 10000,
        sizes=["","万","亿","万亿"],
        i;
      if(val < k) {
        param.value = val;
        param.unit = ''
      } else {
        i = Math.floor(Math.log(val) / Math.log(k));
        param.value = ((val / Math.pow(k,i))).toFixed(2);
        param.unit = sizes[i];
      }
      let number = param.value + param.unit;
      return number;
    }
  },
};
</script>

<style scoped>
/* @import "../../assets/css/home.css"; */
@import "../../assets/css/ysCss/home.css";
@import "../../assets/css/xhHome/shandong.css";
</style>
